<template>
  <!-- 创建时间：2023/4/22 -->
  <!-- 作者：admin -->
  <!-- HotSongItem组件说明： 热门歌曲列表项-->
    <div class="hot-song" @click="showAlbum" :class="{chooseActive:isStay}">
        <!-- 专辑图片-->
        <div class="hot-song-image">
            <el-image
                    :src="formatPicUrl"
                    fit="cover">

            </el-image>
        </div>
        <!-- 歌曲名字和歌手部分-->
        <div class="hot-song-detail">
            <div class="hot-song-title">
                {{ musicDetail.musicName }}<span>{{ aliaName }}</span>
            </div>
            <div class="hot-song-singers">
                <router-link
                        v-for="(item,index) in musicDetail.singers"
                        :to="{
                            name:'singer-detail',
                            params:{
                                id:item.id
                            }
                        }"
                        :title="item.name"
                        :key="index">
                    {{ item.name }}{{ index === musicDetail.singers.length - 1 ? '' : ',' }}
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
import {HOTSONGSHOWBG} from "@/http/constant";

export default {
    name: "HotSongItem",
    props: ['musicDetail'],
    data() {
        return {
            // musicDetail: {
            //     id: 1888354230,
            //     musicName: "默 (Live)",
            //      picUrl: 'https://p1.music.126.net/pleQjKOI26fSenkUGipDLw==/109951166537300832.jpg',
            //     singers: [
            //         {
            //             "id": 4292,
            //             "name": "李荣浩",
            //             "tns": [],
            //             "alias": []
            //         },
            //         {
            //             "id": 6452,
            //             "name": "周杰伦",
            //             "tns": [],
            //             "alias": []
            //         }
            //     ],
            //     alia: ['导师开场歌', '导师开场歌', '导师开场歌'],
            //     album: {
            //         alId: 135010288,
            //         alName: '2021中国好声音 第1期'
            //     },
            //     time: 133290
            // }
            isStay: false
        }
    },
    mounted() {
        this.$bus.$on(HOTSONGSHOWBG, d => {
            this.isStay = String(d.id) === String(this.musicDetail.id);
        })
    },
    methods: {
        // 跳转到专辑详情页面
        showAlbum(e) {
            const {tagName} = e.target
            if (tagName === 'IMG') {
                const {albumName: {alId}} = this.musicDetail
                // 点击专辑图片的时候跳转到详情页面
                this.$router.push({
                    name: 'album-detail',
                    params: {
                        id: alId
                    }
                })
            }
        },
    },
    computed: {
        // 歌曲的副名字
        aliaName() {
            const {alia} = this.musicDetail
            if (alia.length) {
                return ` - ${alia.join(',')}`
            } else {
                return ''
            }
        },
        formatPicUrl() {
            return `${this.musicDetail.picUrl}?param=200y200`
        }
    }
}
</script>

<style scoped lang="less">
@import "@/assets/less/common";

.chooseActive {
  background-color: @bgColor;
  color: @mainColor;
}

.hot-song {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: .3vw;
  border-radius: .5vw;

  &:hover {
    background-color: @mouseHover;
    cursor: pointer;
  }


  .hot-song-image {
    //专辑图片
    > .el-image {
      height: 2vw;
      width: 2vw;
      border-radius: .3vw;
    }
  }

  .hot-song-detail {
    margin-left: .5vw;

    .hot-song-title {
      margin-bottom: .2vw;
      font-size: .75vw;
      font-weight: 600;
      /*多行文字溢出显示省略号*/
      overflow: hidden;
      text-overflow: ellipsis;
      /*弹性盒子模型显示*/
      display: -webkit-box;
      /*限制在一个块元素内显示文本的行数*/
      -webkit-line-clamp: 1;
      /*设置或检索伸缩盒对象的子元素的排列方式*/
      -webkit-box-orient: vertical;

      > span {
        color: @metaphorFont;
      }
    }

    .hot-song-singers {
      font-weight: 300;
      font-size: .6vw;
      /*多行文字溢出显示省略号*/
      overflow: hidden;
      text-overflow: ellipsis;
      /*弹性盒子模型显示*/
      display: -webkit-box;
      /*限制在一个块元素内显示文本的行数*/
      -webkit-line-clamp: 1;
      /*设置或检索伸缩盒对象的子元素的排列方式*/
      -webkit-box-orient: vertical;

      > a:hover {
        text-decoration: underline;
      }
    }
  }
}

</style>